<template>
  <template
    v-if="
      editor?.isActive('toc') ||
      editor?.isActive('pageBreak') ||
      editor?.isActive('horizontalRule') ||
      editor?.isActive('codeBlock') ||
      editor?.getAttributes('image').error
    "
  >
    <!-- <menus-bubble-node-delete /> -->
  </template>
  <template v-else>
    <template
      v-if="editor?.isActive('image') && !editor?.getAttributes('image').error"
    >
      <menus-toolbar-base-align-left />
      <menus-toolbar-base-align-center />
      <menus-toolbar-base-align-right />
      <div class="umo-bubble-menu-divider"></div>
      <menus-bubble-image-flip />
      <menus-bubble-image-proportion />
      <menus-bubble-image-draggable />
      <menus-bubble-image-reset />
      <div class="umo-bubble-menu-divider"></div>
      <menus-bubble-image-remove-background
        v-if="
          editor?.getAttributes('image')?.type.startsWith('image') ||
          ['image/png', 'image/jpeg'].includes(
            editor?.getAttributes('image')?.type,
          )
        "
      />
      <menus-bubble-image-preview
        v-if="
          editor?.getAttributes('image')?.type.startsWith('image') ||
          ['image/png', 'image/jpeg'].includes(
            editor?.getAttributes('image')?.type,
          )
        "
      />
      <menus-bubble-image-open />
      <div class="umo-bubble-menu-divider"></div>
      <menus-bubble-image-edit />
      <menus-bubble-node-duplicate
        v-if="
          editor?.isActive('image') && editor?.getAttributes('image').draggable
        "
      />
      <menus-bubble-node-tofile
        v-if="
          editor?.getAttributes('image').previewType !== null &&
          editor?.getAttributes('image').type.startsWith('image')
        "
      />
      <menus-bubble-image-convert />
      <menus-bubble-node-delete />
    </template>
    <template
      v-else-if="
        editor?.isActive('inlineImage') &&
        !editor?.getAttributes('inlineImage').error
      "
    >
      <menus-toolbar-base-align-left />
      <menus-toolbar-base-align-center />
      <menus-toolbar-base-align-right />
      <div class="umo-bubble-menu-divider"></div>
      <menus-bubble-image-flip />
      <menus-bubble-image-proportion />
      <div class="umo-bubble-menu-divider"></div>
      <menus-bubble-image-remove-background
        v-if="
          editor?.getAttributes('inlineImage')?.type.startsWith('image') ||
          ['image/png', 'image/jpeg'].includes(
            editor?.getAttributes('inlineImage')?.type,
          )
        "
      />
      <menus-bubble-image-preview
        v-if="
          editor?.getAttributes('inlineImage')?.type.startsWith('image') ||
          ['image/png', 'image/jpeg'].includes(
            editor?.getAttributes('inlineImage')?.type,
          )
        "
      />
      <menus-bubble-image-open />
      <div class="umo-bubble-menu-divider"></div>
      <menus-bubble-image-convert />
      <menus-bubble-node-delete />
    </template>
    <template
      v-else-if="
        editor?.isActive('video') ||
        editor?.isActive('audio') ||
        editor?.isActive('file') ||
        editor?.isActive('iframe')
      "
    >
      <menus-toolbar-base-align-left />
      <menus-toolbar-base-align-center />
      <menus-toolbar-base-align-right />
      <div class="umo-bubble-menu-divider"></div>
      <template v-if="editor?.isActive('iframe')">
        <menus-bubble-webpage-clickable />
        <menus-toolbar-insert-web-page
          v-if="!disableMenu('web-page')"
          ico="edit"
          :page-type="editor?.getAttributes('iframe')?.type"
          :page-url="editor?.getAttributes('iframe')?.src"
        />
        <menus-bubble-webpage-open />
        <div class="umo-bubble-menu-divider"></div>
      </template>
      <menus-bubble-file-download
        v-if="
          editor?.isActive('file') ||
          editor?.isActive('video') ||
          editor?.isActive('audio')
        "
      />
      <menus-bubble-node-tofile
        v-if="editor?.isActive('video') || editor?.isActive('audio')"
      />
      <menus-bubble-node-delete />
    </template>
    <template v-else-if="editor?.isActive('table')">
      <menus-toolbar-table-cells-align />
      <menus-toolbar-table-cells-background />
      <!-- <menus-toolbar-table-border-color  /> -->
      <div class="umo-bubble-menu-divider"></div>
      <menus-toolbar-table-add-row-before />
      <menus-toolbar-table-add-row-after />
      <menus-toolbar-table-add-column-before />
      <menus-toolbar-table-add-column-after />
      <div class="umo-bubble-menu-divider"></div>
      <menus-toolbar-table-delete-row />
      <menus-toolbar-table-delete-column />
      <div class="umo-bubble-menu-divider"></div>
      <menus-toolbar-table-merge-cells />
      <menus-toolbar-table-split-cell />
    </template>
    <template v-else-if="editor?.isActive('tag')">
      <menus-bubble-tag-input />
      <menus-bubble-tag-builtin />
      <div class="umo-bubble-menu-divider"></div>
      <menus-bubble-tag-color />
      <menus-bubble-tag-background />
      <div class="umo-bubble-menu-divider"></div>
      <menus-bubble-tag-delete />
    </template>
    <template v-else-if="editor?.isActive('echarts')">
      <menus-toolbar-base-align-left />
      <menus-toolbar-base-align-center />
      <menus-toolbar-base-align-right />
      <div class="umo-bubble-menu-divider"></div>
      <menus-toolbar-tools-echarts ico="setting" />
      <menus-bubble-node-delete />
    </template>
    <template v-else-if="editor?.isActive('optionBox')">
      <menus-toolbar-base-font-size :select="false" />
      <menus-toolbar-base-bold />
      <menus-toolbar-base-italic />
      <div class="umo-bubble-menu-divider"></div>
      <menus-toolbar-base-color />
      <menus-toolbar-base-background-color />
      <div class="umo-bubble-menu-divider"></div>
      <menus-toolbar-insert-option-box :to-edit="true" />
      <div class="umo-bubble-menu-divider"></div>
      <menus-bubble-node-delete />
    </template>
    <template v-else>
      <template v-if="options.ai?.assistant?.enabled">
        <menus-bubble-assistant />
        <div class="umo-bubble-menu-divider"></div>
      </template>
      <menus-toolbar-base-font-size :select="false" />
      <div
        v-if="
          !disableMenu('font-size-increase') ||
          !disableMenu('font-size-decrease')
        "
        class="umo-bubble-menu-divider"
      ></div>
      <menus-toolbar-base-bold />
      <menus-toolbar-base-italic />
      <menus-toolbar-base-underline />
      <menus-toolbar-base-strike />
      <div class="umo-bubble-menu-divider"></div>
      <menus-toolbar-base-align-dropdown />
      <menus-toolbar-insert-link v-if="!disableMenu('link')" />
      <div class="umo-bubble-menu-divider"></div>
      <menus-toolbar-base-color />
      <template v-if="!editor?.isActive('textBox')">
        <menus-toolbar-base-background-color />
        <menus-toolbar-base-highlight v-if="!disableMenu('highlight')" />
      </template>
      <template v-else>
        <menus-bubble-text-box-border />
        <menus-bubble-text-box-background />
        <div class="umo-bubble-menu-divider"></div>
        <menus-bubble-node-delete />
      </template>
    </template>
    <template v-if="editor?.state?.selection">
      <div class="umo-bubble-menu-divider"></div>
      <slot
        name="bubble_menu"
        :node-type="getCurrentNode('name')"
        :node-attrs="getCurrentNode('attrs')"
      />
    </template>
  </template>
</template>

<script setup lang="ts">
const editor = inject('editor')
const options = inject('options')
const disableMenu = (name: string) => {
  return options.value.disableExtensions.includes(name)
}
const getCurrentNode = (type: string) => {
  const { state } = editor.value
  const { selection } = state
  const { $from } = selection
  const currentNode = selection.node || $from.parent
  if (type === 'name') {
    return currentNode.type.name
  }
  if (type === 'attrs') {
    return currentNode.type.attrs
  }
}
</script>

<style lang="less">
.umo-bubble-menu-divider {
  width: 1px;
  border-right: solid 1px var(--umo-border-color-light);
  height: 16px;
  margin: 0 10px 0 5px;
  &:last-child:is(.umo-bubble-menu-divider) {
    display: none;
  }
}
</style>
